<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>首页</title>
    <link rel="stylesheet" href="__MOBILE__/jscss/index.css">
    <link rel="stylesheet" href="__MOBILE__/jscss/css.css">
    <script type="text/javascript" src="__MOBILE__/jscss/w_rem.js" ></script>
    <script src="__MOBILE__/jscss/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script></head>
<body style="background: #f8f8f8;">
    <form>
        <div class="index_top1">
            <div class="index_top1_title clear">
                <div class="index_top1_title_left clear">
                    <div class="index_top1_title_left1">01</div>
                    <div class="index_top1_title_left2">讲座日期</div>
                </div>
                <div class="index_top1_title_right clear">
                    <div class="index_top1_title_right1"><img src="__MOBILE__/img/a1.png" ><input type="date" class="time1"></div>
                    <div class="index_top1_title_right2"></div>
                </div>
            </div>
        </div>
        <div class="index_top1">
            <div class="index_top1_title clear">
                <div class="index_top2_title_left clear"><div class="index_top1_title_left1">02</div><div class="index_top1_title_left2">填写人姓名</div></div>
            </div>
            <div class="index_top2_input"><input type="text" placeholder="请输入填写人姓名"></div>
        </div>
        <div class="index_top1">
            <div class="index_top1_title clear">
                <div class="index_top2_title_left clear"><div class="index_top1_title_left1">03</div><div class="index_top1_title_left2">填写人电话号码</div></div>
            </div>
            <div class="index_top2_input"><input type="tel" placeholder="请输入您的电话号码" maxlength="11"></div>
        </div>
        <div class="index_top1">
            <div class="index_top1_title clear">
                <div class="index_top2_title_left clear"><div class="index_top1_title_left1">04</div><div class="index_top1_title_left2">火警电话是多少?</div></div>
            </div>
            <div class="index_top2_sel">
                <div class="index_top2_sel1 clear">
                    <div class="index_top2_sel_img"><img src="__MOBILE__/img/a2.png"><img src="__MOBILE__/img/a3.png"><input type="radio"></div>
                    <div class="index_top2_sel_text">119</div>
                </div>
                <div class="index_top2_sel1 clear">
                    <div class="index_top2_sel_img"><img src="__MOBILE__/img/a2.png"><img src="__MOBILE__/img/a3.png"><input type="radio"></div>
                    <div class="index_top2_sel_text">120</div>
                </div>
                <div class="index_top2_sel1 clear">
                    <div class="index_top2_sel_img"><img src="__MOBILE__/img/a2.png"><img src="__MOBILE__/img/a3.png"><input type="radio"></div>
                    <div class="index_top2_sel_text">110</div>
                </div>
                <div class="index_top2_sel1 clear">
                    <div class="index_top2_sel_img"><img src="__MOBILE__/img/a2.png"><img src="__MOBILE__/img/a3.png"><input type="radio"></div>
                    <div class="index_top2_sel_text">911</div>
                </div>
            </div>
        </div>
    </form>
    <div class="index_top3">
        <div class="index_top3_text">“您的安全是我们'五进'人工作的本质"，我们为你提供下列消防应急工具，并郑重承诺在产品质量与售后服务方面成单连带责任，您可放心订购。</div>
        <div class="index_top3_line"><img src="__MOBILE__/img/a4.png" width="100%" height="100%"></div>



        {volist name="$data" id="vo"}
        <div package_id="{$vo.id}" limit_number="{$vo.limit_number}" class="index_top3_all clear">
            <div class="clear">
                <div class="index_top3_all_left"><img src="{$vo.single_pic}"></div>
                <div class="index_top3_all_right">
                    <div class="index_top3_all_right1">“{$vo.title}</div>
                    <div class="index_top3_all_right2">¥ <span>{$vo.price}</span></div>
                    <div class="index_top3_all_right3 clear">
                        <div class="index_top3_all_right3a">合计: ¥<span>0</span></div>
                        <div class="index_top3_all_right3b clear">
                            <div class="index_top3_all_right3b1"><img src="__MOBILE__/img/a6.jpg"></div>
                            <div class="index_top3_all_right3b2"><input type="text" disabled="true" value="0"></div>
                            <div class="index_top3_all_right3b3"><img src="__MOBILE__/img/a7.png"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="index_top3_all_more">
                <div class="index_top3_all_more_line"><div class="index_top3_all_more_line1">套餐详情</div><div class="index_top3_all_more_line2"><hr/></div></div>
                {volist name="$vo.goods" id="vo2"}
                <div class="index_top3_all_more_all">
                    <div class="index_top3_all_more_all_left"><img src="{$vo2.single_pic}" width="100%" height="100%"></div>
                    <div class="index_top3_all_more_all_right">
                        <div class="index_top3_all_more_all_right1">
                            <div class="index_top3_all_more_all_right1a">{:strLength($vo2.title,12)}</div>
                            <div class="index_top3_all_more_all_right1b">×1</div>
                        </div>
                        <div class="index_top3_all_more_all_right2">¥{$vo2.price}</div>
                    </div>
                </div>
                {/volist}
            </div>
            <div class="index_top3_all_btn">点击查看套餐详情</div>
        </div>
        {/volist}

    </div>
    <div class="show1"></div>
    <div class="show2">
        <div class="show2_exit"><img src="__MOBILE__/img/a12.png" width="100%" height="100%"></div>
        <div class="show2_all">
            <div class="show2_title">请选择取货类型</div>
            <div class="show2_sel">
                <select name="" id="" class="show2_sel_op">
                    <option>现场自提</option>
                </select>
                <div class="show2_sel_img"><img src="__MOBILE__/img/a13.png" width="100%" height="100%"/></div>
            </div>
            <div class="show2_btn">点击确定</div>
        </div>
        
    </div>
    <a href=""><div class="show3">
        <div class="show3_img"><img src="__MOBILE__/img/a14.png" width="100%" height="100%"></div>
        <div class="show3_text">点击选择微信支付</div>
        
    </div></a>
    <div class="bottom clear">
        <div class="bottom_btn">立即结算</div>
        <div class="bottom_total clear"><div class="bottom_total1">合计</div><div class="bottom_total2">¥<span>0</span></div></div>
        <div class="bottom_num">共<span>0</span>件</div>
    </div>
    <div class="foot_back"></div>
    <div class="foot">
            <a href="index.html"><div class="foot_div1"><div class="foot_div_img"><img src="__MOBILE__/img/a9.png" width="100%" height="100%"></div><div class="foot_div_text" style="color:#1558ff">首页</div></div></a>
            <a href=""><div class="foot_div1"><div class="foot_div_img"><img src="__MOBILE__/img/a10.png" width="100%" height="100%"></div><div class="foot_div_text">客服</div></div></a>
            <a href="mine.html"><div class="foot_div1"><div class="foot_div_img"><img src="__MOBILE__/img/a11.png" width="100%" height="100%"></div><div class="foot_div_text">我的</div></div></a>
    </div>
    <script>
        $(function(){
            let date = new Date()
            let year = date.getFullYear()
            let month = date.getMonth() + 1
            let day = date.getDate()
            time1(year,month,day)
            $('.time1').change(function(){
                //console.log($(this).val())
                $('.time1').parent().next().html($(this).val())
            })
            $('.index_top2_sel1').click(function(){
                // console.log($(this).find('.index_top2_sel_img input').prop('checked'))
                if(!$(this).find('.index_top2_sel_img input').prop('checked')){
                    $(this).parent().find('.index_top2_sel_img input').prop('checked',false)
                    $(this).parent().find('.index_top2_sel1').removeClass('on1')
                    $(this).find('.index_top2_sel_img input').prop('checked',true)
                    $(this).addClass('on1')
                }
            })
            $('.index_top3_all_right3b1').click(function(){
                var num = $(this).parent().find('.index_top3_all_right3b2 input').val()
                var price = $(this).parent().parent().parent().find('.index_top3_all_right2 span').html()
                console.log(price)
                if(num == 0){
                    var num = 0
                }else{
                    var num = parseInt(num) - 1
                }
                var total = num * parseInt(price)
                $(this).parent().find('.index_top3_all_right3b2 input').val(num)
                $(this).parent().parent().find('.index_top3_all_right3a span').html(total);
                var allnum = 0
                var alltotal = 0
                for(var i=0;i<$('.index_top3_all_right3b2 input').length;i++){
                    var allnum1 = $('.index_top3_all_right3b2 input').eq(i).val()
                    var alltotal1 = $('.index_top3_all_right3a span').eq(i).html()
                    var allnum = parseInt(allnum) + parseInt(allnum1)
                    var alltotal = parseInt(alltotal1) + parseInt(alltotal)
                }
                $('.bottom_num span').html(parseInt(allnum))
                $('.bottom_total2 span').html(alltotal)
            })
                $('.index_top3_all_right3b3').click(function(){
                    var num = $(this).parent().find('.index_top3_all_right3b2 input').val()
                    var price = $(this).parent().parent().parent().find('.index_top3_all_right2 span').html()
                    var num = parseInt(num) + 1
                    var total = num * parseInt(price)
                    $(this).parent().find('.index_top3_all_right3b2 input').val(num)
                    $(this).parent().parent().find('.index_top3_all_right3a span').html(total)
                    var allnum = 0
                    var alltotal = 0
                    for(var i=0;i<$('.index_top3_all_right3b2 input').length;i++){
                    var allnum1 = $('.index_top3_all_right3b2 input').eq(i).val()
                    var alltotal1 = $('.index_top3_all_right3a span').eq(i).html()
                    var allnum = parseInt(allnum) + parseInt(allnum1)
                    var alltotal = parseInt(alltotal1) + parseInt(alltotal)
                    }
                    $('.bottom_num span').html(parseInt(allnum))
                    $('.bottom_total2 span').html(parseInt(alltotal))
            })
            $('.index_top3_all_btn').click(function(){
                if($(this).parent().find('.index_top3_all_more').css('display')!='none'){
                    $(this).parent().find('.index_top3_all_more').css('display','none')
                    $(this).removeClass('on2')
                    $(this).html('点击查看套餐详情')
                }else{
                    $(this).parent().find('.index_top3_all_more').css('display','block')
                    $(this).addClass('on2')
                    $(this).html('点击收起该套餐商品')
                }
            })
            /**
             * 立即计算
             */
            $('.bottom_btn').click(function(){
                $('.show1').css('display','block')
                $('.show2').css('display','block')
                var package_ids = [];
                var package_numbers = [];
                var ids_numbers = [];
                $('.index_top3_all').each(function (k,v) {
                    var data = {};
                    var package_id = $(this).attr('package_id');
                    var package_number = $(this).find('input').val();
                    var limit_number = $(this).attr('limit_number');
                    // data.package_id= package_id;
                    // data.package_number= number;
                    // console.log(package_id);
                    // console.log(number);
                    // console.log(data);
                    if(package_number > 0 ){
                        data.package_id= package_id;
                        data.package_number= package_number;
                        ids_numbers.push(data);
                        // package_numbers.push(number);
                    }
                });
                var l = jQuery.param(ids_numbers);
                console.log(l);
                $.ajax({
                    type: "POST", //用POST方式传输
                    dataType: "json", //数据格式:JSON
                    url: "{:url('order_create')}", //目标地址
                    async: false,
                    traditional :false,
                    data:ids_numbers,
                    success: function (ret) {

                        console.log(ret);
                    }
                });
                 console.log(ids_numbers);
            })
            $('.show2_exit').click(function(){
                $('.show1').css('display','none')
                $('.show2').css('display','none')
            })
            $('.show2_btn').click(function(){
                $('.show2').css('display','none')
                $('.bottom').css('z-index','15')
                $('.foot').css('z-index','15')
                $('.show3').css('display','block')
                $('.bottom_btn').addClass('on3')
            })
            $('.show3').click(function(){
                $('.bottom_btn').removeClass('on3')
                $('.show1').css('display','none')
                $('.show3').css('display','none')
                $('.bottom').css('z-index','10')
                $('.foot').css('z-index','10')
            })
            function time1(a3,a1,a2) {
                if(a1<10&&a2<10){
                    $('.time1').parent().next().html(a3+'-0'+a1+'-0'+a2);
                }else if(a1>9&&a2<10){
                    $('.time1').parent().next().html(a3+'-'+a1+'-0'+a2);
                }else if(a1<10&&a2>9){
                    $('.time1').parent().next().html(a3+'-0'+a1+'-'+a2);
                }else{
                    $('.time1').parent().next().html(a3+'-'+a1+'-'+a2);
                }
            }
        })
    </script>
</body>
</html>